<template>
  <div class="record">
    <div class="t-container">
      <ul class="record-ul">
        <li class="record-li">
          <div class="record-left">
            <div class="left-time">更新时间：</div>
            <div class="left-con">更新内容：</div>
          </div>
          <div class="record-right">
            <div class="right-time">
              <i class="iconfont icon-time"></i>2020-04-17
            </div>
            <ul class="right-ol">
              <li>
                <i class="iconfont icon-right"></i>修复“反馈”页面可以无限重复提交的BUG。
              </li>
            </ul>
          </div>
        </li>
        <li class="record-li">
          <div class="record-left">
            <div class="left-time">更新时间：</div>
            <div class="left-con">更新内容：</div>
          </div>
          <div class="record-right">
            <div class="right-time">
              <i class="iconfont icon-time"></i>2020-04-15
            </div>
            <ul class="right-ol">
              <li>
                <i class="iconfont icon-right"></i>增加软件安装包分享页面。
              </li>
              <li>
                <i class="iconfont icon-right"></i>修复QQ新用户登录，添加数据到错误字段的BUG。
              </li>
            </ul>
          </div>
        </li>
        <li class="record-li">
          <div class="record-left">
            <div class="left-time">更新时间：</div>
            <div class="left-con">更新内容：</div>
          </div>
          <div class="record-right">
            <div class="right-time">
              <i class="iconfont icon-time"></i>2020-04-02
            </div>
            <ul class="right-ol">
              <li>
                <i class="iconfont icon-right"></i>暂时移除看板娘。
              </li>
              <li>
                <i class="iconfont icon-right"></i>增加”首页“显示最新的日志。
              </li>
              <li>
                <i class="iconfont icon-right"></i>QQ互联进行功能测试。(线上项目暂时无法QQ登录)
              </li>
              <li>
                <i class="iconfont icon-right"></i>修改部分消息提示显示方式。
              </li>
            </ul>
          </div>
        </li>
        <li class="record-li">
          <div class="record-left">
            <div class="left-time">更新时间：</div>
            <div class="left-con">更新内容：</div>
          </div>
          <div class="record-right">
            <div class="right-time">
              <i class="iconfont icon-time"></i>2020-03-24
            </div>
            <ul class="right-ol">
              <li>
                <i class="iconfont icon-right"></i>增加登录按钮。（具体功能待审核后才能开始设计。）
              </li>
              <li>
                <i class="iconfont icon-right"></i>修改移动端菜单栏中”笔记本“的显示方式。
              </li>
            </ul>
          </div>
        </li>
        <li class="record-li">
          <div class="record-left">
            <div class="left-time">更新时间：</div>
            <div class="left-con">更新内容：</div>
          </div>
          <div class="record-right">
            <div class="right-time">
              <i class="iconfont icon-time"></i>2020-03-15
            </div>
            <ul class="right-ol">
              <li>
                <i class="iconfont icon-right"></i>修复因14日调整了项目结构后，造成的部分页面刷新无法加载CSS文件的错误。
              </li>
              <li>
                <i class="iconfont icon-right"></i>新增网站访问统计接口，并实现前后端数据交互功能。
              </li>
              <li>
                <i class="iconfont icon-right"></i>修改“更新记录”页面更新时间显示方式。
              </li>
              <li>
                <i class="iconfont icon-right"></i>调整统计面板。
              </li>
              <li>
                <i class="iconfont icon-warning"></i>新增“图片资源分享”页面。（测试中）
              </li>
            </ul>
          </div>
        </li>
        <li class="record-li">
          <div class="record-left">
            <div class="left-time">更新时间：</div>
            <div class="left-con">更新内容：</div>
          </div>
          <div class="record-right">
            <div class="right-time">
              <i class="iconfont icon-time"></i>2020-03-14
            </div>
            <ul class="right-ol">
              <li>
                <i class="iconfont icon-right"></i>修改移动端”菜单栏“的显示方式。
              </li>
              <li>
                <i class="iconfont icon-right"></i>修复”留言板“页面在移动端上出现字体无法换行显示的问题。
              </li>
              <li>
                <i class="iconfont icon-right"></i>修复移动端所有文章列表标题显示溢出问题。
              </li>
              <li>
                <i class="iconfont icon-right"></i>修改看板娘显示的位置。
              </li>
              <li>
                <i class="iconfont icon-right"></i>更改看板娘显示的方式，默认只会在PC端显示。
              </li>
              <li>
                <i class="iconfont icon-right"></i>设置所有提示信息动画。
              </li>
            </ul>
          </div>
        </li>
        <li class="record-li">
          <div class="record-left">
            <div class="left-time">更新时间：</div>
            <div class="left-con">更新内容：</div>
          </div>
          <div class="record-right">
            <div class="right-time">
              <i class="iconfont icon-time"></i>2020-03-13
            </div>
            <ul class="right-ol">
              <li>
                <i class="iconfont icon-right"></i>增加”留言板“页面富文本编辑器。
              </li>
              <li>
                <i class="iconfont icon-right"></i>增加”留言板“翻页提示功能。
              </li>
              <li>
                <i class="iconfont icon-warning"></i>增加全局看板娘。（测试中）
              </li>
            </ul>
          </div>
        </li>
        <div class="record-li">
          <div class="record-left">
            <div class="left-time">更新时间：</div>
            <div class="left-con">更新内容：</div>
          </div>
          <div class="record-right">
            <div class="right-time">
              <i class="iconfont icon-time"></i>2020-03-12
            </div>
            <ul class="right-ol">
              <li>
                <i class="iconfont icon-right"></i>修改“反馈”页面提交数据后的提示方式。
              </li>
              <li>
                <i class="iconfont icon-right"></i>增加“友人帐”页面的数据添加功能。
              </li>
              <li>
                <i class="iconfont icon-right"></i>增加“友人帐”页面提交信息后的提示方式。
              </li>
              <li>
                <i class="iconfont icon-right"></i>增加”留言板“列表显示方式。
              </li>
              <li>
                <i class="iconfont icon-right"></i>增加”留言板“翻页功能。
              </li>
            </ul>
          </div>
        </div>
        <li class="record-li">
          <div class="record-left">
            <div class="left-time">更新时间：</div>
            <div class="left-con">更新内容：</div>
          </div>
          <div class="record-right">
            <div class="right-time">
              <i class="iconfont icon-time"></i>2020-03-07
            </div>
            <ul class="right-ol">
              <li>
                <i class="iconfont icon-right"></i>修改”笔记本“分类。
              </li>
              <li>
                <i class="iconfont icon-right"></i>增加“分享”页面。
              </li>
              <li>
                <i class="iconfont icon-right"></i>将原有的“API接口”页面移植到“分享”页面。
              </li>
              <li>
                <i class="iconfont icon-right"></i>添加“反馈”页面插入数据功能。
              </li>
            </ul>
          </div>
        </li>
        <li class="record-li">
          <div class="record-left">
            <div class="left-time">更新时间：</div>
            <div class="left-con">更新内容：</div>
          </div>
          <div class="record-right">
            <div class="right-time">
              <i class="iconfont icon-time"></i>2020-03-06
            </div>
            <ul class="right-ol">
              <li>
                <i class="iconfont icon-right"></i>替换网站矢量图。
              </li>
              <li>
                <i class="iconfont icon-right"></i>增加QQ群聊显示模块。
              </li>
              <li>
                <i class="iconfont icon-right"></i>设计更新记录模块。
              </li>
              <li>
                <i class="iconfont icon-right"></i>修改“友人帐”页面在Safari浏览器中会发生变化的细节问题。
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="less" scoped>
.record {
  padding-top: 100px;
  padding-bottom: 60px;
  .t-container{
    background-color: #fff;
    border-radius: 8px;
    padding-top: 40px;
    padding-bottom: 20px;
  }
  .record-ul {
    width: 100%;
    height: auto;
    padding: 0px 20px;
  }
  .record-li {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
  }
  .record-li::after {
    content: "";
    display: table;
    clear: both;
    font-size: 12px;
  }
  .record-left {
    width: 120px;
    float: left;
  }
  .record-right {
    float: left;
  }
  .right-time {
    color: rgb(14, 170, 162);
    font-size: 12px;
  }
  .record-li:last-child {
    border-bottom: none;
  }
  .icon-right,
  .icon-success_fill,
  .icon-success {
    color: rgb(8, 177, 36);
  }
  .icon-warning {
    color: red;
  }
}
</style>